<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#left:hover{
				margin-left: 10px;
				
			}
			#bottom{
				width: 100px;  height: 100px; 
				margin-bottom: 0px;
				transition: margin-bottom 1s; 
				-moz-transition: margin-bottom 1s;
				-webkit-transition: margin-bottom 1s;
				
			}
			#bottom:hover{
				margin-bottom: 10px;
				transform: rotate(10deg);
			}
			.Zhe{
				width: 160px;
				height:80px;
				
			}
			.imgZhe{
				position: relative;
				width: 160px;
				height:80px;
				list-style-type: none;
				margin-left: 10px;
				display: inline-block;
			}
			.preview:hover .modal{
				opacity: 1;
			}
			.modal{
				transition: all .5s;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: rgba(0,0,0,0.5);
				opacity: 0;
				text-align: center;
				height: 80px;
				line-height: 80px;
			}
			span{
				color: white;
				font-size: 24px;
				line-height: 24px;
				
			}
		</style>
	</head>
	<body>
		<div class="imgleft" align="center">
		<img id="left" src="img/fen1.jpg" style="width: 100px;  height: 100px; top: 100px; left: 100px;" />
	
	    <img id="left" src="img/fen1.jpg" style="width: 100px;  height: 100px; top: 100px; left: 100px;" />
	    <img id="left" src="img/fen1.jpg" style="width: 100px;  height: 100px; top: 100px; left: 100px;" />
	
	   <img id="left" src="img/fen1.jpg" style="width: 100px;  height: 100px; top: 100px; left: 100px;" />
	    
		</div>
		<div class="imgbottom" align="center">
	<img id="bottom" src="img/fen-1.png"  />
	<img id="bottom" src="img/fen-1.png"  />
	<img id="bottom" src="img/fen-1.png" />
	<img id="bottom" src="img/fen-1.png"  />
	
		</div>
		<ul class="imgZheAll">
			<li class="imgZhe preview">
			 <img src="img/beijing.jpg" class="Zhe" />
			 <div class="modal"><span>Hello</span></div>
			</li>
			<li class="imgZhe preview">
			 <img src="img/beijing.jpg" class="Zhe" />
			 <div class="modal"><span>Hello</span></div>
			</li>
			<li class="imgZhe preview">
			 <img src="img/beijing.jpg" class="Zhe" />
			 <div class="modal"><span>Hello</span></div>
			</li>
			<li class="imgZhe preview">
			 <img src="img/beijing.jpg" class="Zhe" />
			 <div class="modal">
			 	<span>Hello</span>
			 </div>
			</li>
			
			
				
		</ul>
	
	</body>
	<!--<script src="js/jquery.min.js"></script>
	<script>
		$(function(){
		
			var left=document.getElementById("left");
		    left.onmouseover=function(){
		    	$('#left').animate({"margin-left":"10px"})
		    }
		    left.onmouseout=function(){
		    	$('#left').animate({"margin-left":"0px"})
		    }
		})
	</script>-->
</html>
